<template>
  <div>
    <el-drawer :before-close="beforeClose" :title="model|modelTitle" :visible.sync="myValue" direction="rtl" size="30%">
      <el-divider></el-divider>
      <div class="py-2 px-5">
        <el-form ref="formData" :disabled="disabled" :model="formData" size="small" label-width="120px">
          <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model="formData.menuType">
              <el-radio :label="1">一级菜单</el-radio>
              <el-radio :label="2">子菜单</el-radio>
              <el-radio :label="3">按钮</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="formData.menuType==3?'按钮名称':'菜单名称'" prop="menuName">
            <el-input v-model="formData.menuName" :placeholder="formData.menuType==3?'请输入按钮名称':'请输入菜单名称'"></el-input>
          </el-form-item>

          <el-form-item v-if="formData.menuType!=3" label="前端路由" prop="path">
            <el-input v-model="formData.path" placeholder="前端路由(/welcome)"></el-input>
          </el-form-item>

          <el-form-item v-if="formData.menuType==3" label="权限标识" prop="permission">
            <el-input v-model="formData.permission" placeholder="权限标识(admin:add)"></el-input>
          </el-form-item>

          <el-form-item v-if="formData.menuType!=1" label="上级菜单" prop="tree">
            <tree-select :width="360" :data="menuTree" :defaultProps="{children: 'children',label: 'menuName'}" nodeKey="id"
              :checkedKeys="[formData.pid]" @popoverHide="checkedIds=>formData.pid = checkedIds"></tree-select>
          </el-form-item>

          <el-form-item label="菜单图标" prop="icon" v-if="formData.menuType!=3">
            <el-input placeholder="选择菜单图标" v-model="formData.icon">
              <template slot="append">
                <el-button @click="showPopup=!showPopup">
                  <i class="el-icon-sunny" style="font-size:16px"></i>
                </el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="是否隐藏" prop="hidden">
            <el-switch v-model="formData.hidden" :active-value="1" :inactive-value="0">
            </el-switch>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('formData')">提交</el-button>
            <el-button @click="resetForm('formData')">重置</el-button>
          </el-form-item>
        </el-form>

      </div>
    </el-drawer>
    <!-- 图标选择组件 -->
    <selectIcon :showPopup="showPopup" @subIcon="icon=>formData.icon=icon" @closeIcon="bol=>showPopup=bol" />
  </div>
</template>

<script>
import treeSelect from '@/components/treeSelect'
import selectIcon from '@/components/selectIcon'
import form from '@/mixins/form.js'

export default {
  mixins: [form],
  props: {
    value: {
      type: Boolean
    }
  },
  components: {
    treeSelect,
    selectIcon
  },

  data () {
    return {
      menuTree: [],
      defaultCheckedKeys: [], //树状结构默认选中

      myValue: false,

      showPopup: false,

      formData: {
        icon: '',
        menuType: 1,
        hidden: 0,
        pid: 0,
        path: '',
        permission: ''
      },
    }
  },
  watch: {
    // 显示
    value (newVal) {
      this.myValue = newVal
    },
    myValue (newVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {

    // 添加数据
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let rowResult = {}
          let formData = {}
          // 先判断提交的数据是 一级菜单/子菜单/按钮
          switch (this.formData.menuType) {
            case 1:
              var { menuName, menuType, path, icon, hidden } = this.formData
              formData = { menuName, menuType, path, icon, hidden }
              break;
            case 2:
              var { menuName, menuType, path, icon, hidden, pid } = this.formData
              formData = { menuName, menuType, path, icon, hidden, pid }
              break;
            case 3:
              var { menuName, menuType, hidden, pid, permission } = this.formData
              formData = { menuName, menuType, hidden, pid, permission }
              break;
          }

          if (this.rowId != 0) {
            rowResult = await this.$http.put(`${this.$parent.api}/${this.rowId}`, formData)
          } else {
            rowResult = await this.$http.post(this.$parent.api, formData)
          }
          this.$message({
            type: 'success',
            message: rowResult.msg
          })
          this.$emit('input', false)
          this.$emit('fetchData')
        } else {
          return false;
        }
      })
    },

    // 获取该条数据信息
    async fetchRow (model, id = 0) {
      // 获取菜单
      await this.getMenuTree()
      let rowResult = {}
      this.model = model
      this.rowId = id
      switch (model) {
        // 添加
        case 'add':
          this.disabled = false
          break
        case 'edit':
          this.disabled = false
          rowResult = await this.$http.get(`${this.$parent.api}/${this.rowId}`)
          this.formData = rowResult.data
          break
        case 'details':
          this.disabled = true
          rowResult = await this.$http.get(`${this.$parent.api}/${this.rowId}`)
          this.formData = rowResult.data
          break
      }
    },

    // 获取上级菜单结构
    async getMenuTree () {
      const menuTree = await this.$http.get(this.$api.menuTree)
      this.menuTree = menuTree.data
    },



  },
}
</script>

